<header class="container-fluid main-color" id="embed_page_header">
    <div class="row">
        <div class="col-2 col-sm-1 col-md-1 text-center"><a [routerLink]="['/home']" role="button" class="btn" title="主页"><i class="ico-sm mdi mdi-home"></i></a></div>
        <div class="col-8 col-sm-10 col-md-10 embed_header_title text-center">注册会员</div>
        <div class="col-2 col-sm-1 col-md-1 text-center"><a href="javascript:;" role="button" class="btn sidePanelDrawer" title="版块主页"><i class="ico mdi mdi-menu"></i></a></div>
    </div>
</header>
<div id="embed_page">
    <div class="container">
        <form name="form" data-submit="once" class="theme-form" (ngSubmit)="f.form.valid && createMember(submitBtn)" #f="ngForm" novalidate>
        <div id="embed_page_form" class="main-color">
            <div class="alert alert-danger" role="alert" *ngIf="errorMessage.length > 0">
                <strong>oOps!</strong> {{errorMessage}}
            </div>
            <div class="form-group">
                <label for="names" class="bmd-label-floating">帐号</label>
                <input type="text" name="names" tabindex="1" size="25" class="form-control" placeholder="" [(ngModel)]="member.names" #names="ngModel" validate-onblur [ngClass]="{ 'is-invalid': f.submitted && names.invalid }" minlength="5" maxlength="20" required="required"/>
                <span class="bmd-help">帐号长度必须介于5个字符和20个字符之间，并且只能使用字母数字字符</span>
                <ul *ngIf="f.submitted && names.invalid" class="parsley-errors-list filled">
                    <li *ngIf="names.errors.required">请输入会员的登录帐号名称</li>
                    <li *ngIf="names.errors.minlength">登录帐号不能少于5个字母</li>
                    <li *ngIf="names.errors.maxlength">登录帐号不能大于20个字母</li>
                    <li *ngIf="names.errors.namesUnion">登录帐号已经存在</li>
                </ul>
            </div>
            <div class="form-group">
                <label for="nickname" class="bmd-label-floating">昵称</label>
                <input type="text" name="nickname" tabindex="2" size="25" maxlength="100" class="form-control" placeholder="" autocomplete="off" [(ngModel)]="member.nickname" />
                <span class="bmd-help">昵称为可选项,若不输入系统将自动生成:Member#随机位</span>
            </div>
            <div class="form-group" id="pwdbox">
                <label for="newPswd" class="bmd-label-floating">密码</label>
                <input type="password" name="newPswd" tabindex="3" size="25" class="form-control" placeholder="" autocomplete="off" [(ngModel)]="member.newPswd" #newPswd="ngModel" [ngClass]="{ 'is-invalid': f.submitted && newPswd.invalid }" minlength="6" maxlength="100" required="required"/>
                <span class="bmd-help">密码必须介于6个字符和100个字符之间</span>
                <ul *ngIf="f.submitted && newPswd.invalid" class="parsley-errors-list filled">
                    <li *ngIf="newPswd.errors.required">请输入会员的登录密码</li>
                    <li *ngIf="newPswd.errors.minlength">登录密码不能少于6个字母</li>
                    <li *ngIf="newPswd.errors.maxlength">登录密码不能大于100个字母</li>
                </ul>
            </div>
            <div class="form-group">
                <label for="pswdConfirm" class="bmd-label-floating">确认密码</label>
                <input type="password" name="pswdConfirm" tabindex="4" size="25" class="form-control" placeholder="" autocomplete="off" [(ngModel)]="member.pswdConfirm" #pswdConfirm="ngModel" ngValidateEqual="newPswd" [ngClass]="{ 'is-invalid': f.submitted && pswdConfirm.invalid }" minlength="6" maxlength="100" required="required"/>
                <ul *ngIf="f.submitted && pswdConfirm.invalid" class="parsley-errors-list filled">
                    <li *ngIf="pswdConfirm.errors.required">请输入确认密码</li>
                    <li *ngIf="pswdConfirm.errors.minlength">确认密码不能少于6个字母</li>
                    <li *ngIf="pswdConfirm.errors.maxlength">确认密码不能大于100个字母</li>
                    <li *ngIf="pswdConfirm.hasError('notEqual')">两次密码输入不一致</li>
                </ul>
            </div>
            <div class="form-group" *ngIf="activeInvite">
                <label for="inviteCode" class="bmd-label-floating">邀请码:</label>
                <input type="password" name="inviteCode" tabindex="5" size="25" class="form-control" autocomplete="off" [(ngModel)]="member.inviteCode"/>
            </div>
            <div class="form-check">
                <input type="checkbox" name="agreed" checked="checked" class="form-check-input" [(ngModel)]="member.agreed" />
                <label>我已阅读并完全同意 <a [routerLink]="['/member/register/licenses']">用户协议及条款内容</a></label>
            </div>
            <input type="submit" tabindex="6" class="btn btn-primary btn-block" [disabled]="!member.agreed" value="免费注册" [ngClass]="{'disabled': !f.form.valid}" #submitBtn/>
        </div>
        <p class="main-color control-label" style="padding-bottom: 15px;text-align: center;">已有帐号! 马上<a [routerLink]="['/member/login']">登录</a>进入系统</p>
        </form>
    </div>
</div>